<template>
  <view class="page">
    <!--  顶部标题栏  -->
    <!--    <view class = "Tab">
          <view class = "TabLeft">
            <image :src = "`${BASE_URL}/mine/back.png`" style = "width:60rpx;height: 60rpx;" @click = "back"></image>
          </view>
          <view class = "TabCenter">
            <view style = "font-size: 40rpx;font-weight: 400;margin-right: 50rpx">旅游日志</view>
          </view>
        </view>-->
    <!-- 主体内容 -->
    <!-- 日期选择 -->
    <scroll-view class="main-content" scroll-y>
      <!-- 日期选择 -->
      <view class="date-section">
        <text class="label">请选择您的旅游日期~</text>
        <uni-datetime-picker v-model="travelDate" placeholder="请选择日期">
        </uni-datetime-picker>
      </view>

      <!-- 五星评分 -->
      <view class="rating-section">
        <text class="label">为这次的旅游体验打个分吧！</text>
        <up-rate :count="count" v-model="value" active-color="#ffdd1a" inactive-color="#b2b2b2" gutter="6"></up-rate>

      </view>

      <!-- 心得输入 -->
      <view class="note-section">
        <text class="label">记录一下本次旅游心得吧~</text>
        <view class="textarea-container">
          <textarea v-model="content" placeholder="说点什么吧..." :maxlength="200"
            :class="['input', !content && showError ? 'error' : '']" />
          <text class="counter">{{ content?.length || 0 }}/200</text>
        </view>
      </view>

      <!-- 表情选择 -->
      <view class="satisfaction-section">
        <text class="label">您对该景点满意吗？</text>
        <view class="emojis">
          <view v-for="(emoji, i) in emojis" :key="i" @click="selectedEmoji = i"
            :class="selectedEmoji === i ? 'selected' : ''" class="emoji">
            <image :src="emoji.icon" class="icon" />
          </view>
        </view>
      </view>

      <!-- 保存按钮 -->
      <button @click="saveLog" class="save-button">
        保存日志
      </button>
    </scroll-view>

    <!-- 底部卡通 -->
    <view class="footer">
      <image :src="`${BASE_URL}/mine/bottom-bg.png`" class="background-cover" />
    </view>


  </view>
</template>

<script setup>
import { ref } from 'vue'
import { BASE_URL } from "../../../utils/api";

function back() {
  uni.switchTab({
    url: '/pages/mine/mine', success: (res) => {
      console.log("跳转成功");
    }, fail: (err) => {
      console.error("跳转失败", err);
    }
  });
}

// 数据绑定
const travelDate = ref('')
const count = ref(5);
const value = ref(0);
const content = ref('')
const selectedEmoji = ref(0)
const showError = ref(false)

const emojis = ref([{ icon: `${BASE_URL}/mine/satisfied.svg` }, { icon: `${BASE_URL}/mine/happy.svg` }, { icon: `${BASE_URL}/mine/regret.svg` }, { icon: `${BASE_URL}/mine/disappoint.svg` }])

// 表单验证
const validateForm = () => {
  showError.value = true
  if (!travelDate.value) {
    uni.showToast({ title: '请选择日期', icon: 'none', duration: 2000 })
    return false
  }
  if (!content.value.trim()) {
    uni.showToast({ title: '请输入心得内容', icon: 'none', duration: 2000 })
    return false
  }
  return true
}

// 保存功能
const saveLog = async () => {
  if (!validateForm()) return
  uni.showToast({ title: '保存成功' })
  setTimeout(() => uni.navigateBack(), 1500)

  // try {
  //   const logData = {
  //     date: travelDate.value, rating: rating.value, content: content.value.trim(), mood: emojis.value[selectedEmoji.value]?.label || '未评价'
  //   }

  //   await uni.$api.saveTravelLog(logData)
  //   uni.showToast({title: '保存成功'})
  //   setTimeout(() => uni.navigateBack(), 1500)
  // } catch (e) {
  //   uni.showToast({
  //     title: `保存失败: ${e.message || '未知错误'}`, icon: 'error'
  //   })
  // }
}
</script>

<style lang="scss">
/* 页面容器 */
.page {
  background-color: #C7E9FD;
  min-height: 100vh;
}

/* 头部导航 */
.header {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.back-button {
  text-align: start;
  background-color: transparent;
}

.title {
  text-align: center;
  font-size: 1.25rem;
  font-weight: bold;
  margin-left: 1rem;
}

.Tab {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 7vh;
  background-color: #C7E9FD;
  justify-content: center;
  align-items: center;
}

.TabLeft {
  flex: 0.1;
  display: flex;
  justify-content: start;
}

.TabCenter {
  flex: 0.9;
  display: flex;
  justify-content: center;

}

/* 主体内容 */
.main-content {
  padding: 1rem;
}

.date-section {
  width: 40%;
}

/* 标签 */
.label {

  margin-top: 10px;
  font-weight: bold;
  font-size: 0.875rem;
  margin-bottom: 1rem;
  display: block;
}

/* 输入框样式 */
.input {
  background-color: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 0.5rem;
  padding: 0.5rem;
  width: 87%;
}

.textarea-container {
  position: relative;
  width: 100%;
}

/* 错误状态 */
.error {
  border-color: #f87171 !important;
}

.date-picker {
  width: 40%;
}

.input-choice {
  height: 40%;
}

/* 字数统计 */
.counter {
  position: absolute;
  right: 2.9rem;
  top: 8rem;

  font-size: 0.75rem;
  color: gray;
}


/* 表情选择 */
.satisfaction-section {
  margin-top: 1rem;
  width: 100%;

}

.emojis {
  gap: 8px;
  width: 3rem;
  width: calc(100% / 4);
  display: grid;
  grid-column: 1fr 1fr 1fr 1fr;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 1rem;
}

.emoji {

  border-radius: 0.5rem;

  padding: 0.5rem;
  display: flex;
  transition: all 0.3s ease;
}

.emoji.selected {
  border-color: #3b82f6;
  background-color: #ffffff;
}

/* 图标 */
.icon {
  width: 4rem;
  height: 4rem;
}

/* 保存按钮 */
.save-button {
  left: -20px;
  width: 70%;
  background-color: #22c55e;
  color: white;
  border-radius: 15px;
  padding: 10px 10px;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;

  transition: background-color 0.3s ease;
}

.save-button {
  background-color: #16a34a;
  margin-top: 40px;
}

/* 底部卡通 */
.footer .background-cover {
  margin-top: 28px;
  width: 100%;
  height: 185px;
  object-fit: cover;
}

.background {
  width: 100%;
  height: 180px;
}
</style>